<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-row class="margin-bottom:20px">
          配置选项
        </el-row>
        <el-form ref="configFormRef" :model="configForm" label-width="100px">
          <el-form-item label="运算类型">
            <el-checkbox-group v-model="configForm.mathType" @change="mathTypeChange">
              <el-checkbox v-for="(item,index) in mathType" :key="index" :value="item.value" :label="item.label"/>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="运算范围">
            <el-radio-group v-model="configForm.mathRangeType" :disabled="mathRangeTypeStatus">
              <el-radio v-for="(item,index) in mathRangeType" :label="item.label" :value="item.value" :key="index">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="计算项个数">
            <el-input-number v-model="configForm.mathItemCount" placehold="参与计算变量个数" :min="2" :max="3"/>
          </el-form-item>
          <el-form-item label="题目数量">
            <el-input-number v-model="configForm.generatorCount" placehold="生成题目数量" :min="1" :max="100"/>
          </el-form-item>
        </el-form>
        <el-row justify="center">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button>清空</el-button>
        </el-row>
      </el-col>
      <el-col :span="18">
        <el-card >
          <el-row>
            <el-row>
              <el-form :model="showResultForm" label-width="80px" inline>
                <el-form-item label="题目列数">
                  <el-select style="width: 200px;" v-model="showResultForm.resultCol">
                    <el-option label="2列" :value="12"/>
                    <el-option label="3列" :value="8"/>
                    <el-option label="4列" :value="6"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="显示结果">
                  <el-switch v-model="showResultForm.showResult" active-text="显示" inactive-text="不显示"
                             inline-prompt/>
                </el-form-item>
              </el-form>
            </el-row>
            <el-button type="primary" v-print="printConfig">打印</el-button>
          </el-row>
          <el-row style="font-size: 18px" id="printBox">
            <el-col :span="showResultForm.resultCol" v-for="(item,index) in mathResultList" :key="index" >
              <el-row>
                <el-col :span="2" class="math-cell">
                  {{item.param1}}
                </el-col>
                <el-col :span="2" class="math-cell">
                  {{item.typeStr}}
                </el-col>
                <el-col :span="2" class="math-cell">
                  {{ item.param2 }}
                </el-col>
                <el-col :span="2" class="math-cell" v-if="item.typeStr2 != null && item.typeStr2 != undefined && item.typeStr2 !== ''">
                 {{item.typeStr2}}
                </el-col>
                <el-col :span="2" class="math-cell" v-if="item.param3 !== null && item.param3 !== undefined">
                  {{ item.param3 }}
                </el-col>
                <el-col :span="2" class="math-cell" v-if="!configForm.mathType.includes(6)">
                  =
                </el-col>
                <el-col :span="2" class="math-cell" v-show="showResultForm.showResult">
                  {{item.result}}
                </el-col>
              </el-row>
              <!--              {{ item.mathStr }} = <span v-show="showResultForm.showResult">{{ item.result }}</span>-->
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref,getCurrentInstance} from "vue"
import {generatorMath} from "@/util/mathUtils"
import type {MathModel} from "@/model/MathModel"
import {mathRangeType, mathType} from "@/constant/mathConstants"
import { ElMessage } from 'element-plus'

const { appContext } = getCurrentInstance()!

const mathRangeTypeStatus = ref(false)

const config = {
  // 运算类型
  mathType: [] as number[],
  // 运算范围：
  mathRangeType: null,
  // 生成题目数量
  generatorCount: 10,
  mathItemCount:2
}

const configForm = reactive(config)

const mathTypeChange = (val:number[]) =>{
  if (val.includes(4)) {
    configForm.mathType = [4]
    configForm.mathRangeType = null
  }
  else if (val.includes(6)) {
    configForm.mathType = [6]
    showResultForm.showResult = false
  }else{

  }
  mathRangeTypeStatus.value = val.includes(4)
}

//这里是打印的配置项
const printConfig = reactive({
  id: 'printBox',//这里的id就是上面我们的打印区域id，实现指哪打哪
  popTitle: '数学计算题', // 打印配置页上方的标题
  extraHead: '时间：_____ 分数：____', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: '预览的标题', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log('正在加载预览窗口！');
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log('已经加载完预览窗口，预览打开了！')
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    console.log('开始打印之前！')
  }, // 开始打印之前的callback
  openCallback() {
    console.log('执行打印了！')
  }, // 调用打印时的callback
  closeCallback() {
    console.log('关闭了打印工具！')
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log('点击v-print绑定的按钮了！')
  },
})

const mathResultList = ref([] as Array<MathModel>)

const showResultForm = reactive({
  resultCol: 8,
  showResult: true
})

const submit = () => {
  if (configForm.mathType.length === 0){
    ElMessage({type:'error',message:'请选择运算类型'})
    return
  }
  mathResultList.value = generatorMath(configForm)
}

</script>

<style scoped>
.math-cell{
  text-align: center;
  min-width: 30px;
}
</style>
